<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="asset/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="asset/css/app.css"/>
    <link rel="stylesheet" type="text/css" href="asset/css/feedback.css" />
</head>
<style>

    .card-img-list {  max-width: 1.1rem;  max-height: 1rem;  }
    .likelistli img{  width: 0.3rem;  height: 0.3rem;  border-radius: 0.4rem;  }
    .card-head{  overflow: hidden;  }
    .card-img{  width: 0.4rem !important;  height: 0.4rem !important;;  border-radius: 0.4rem;  margin: 0.02rem;  }
    .card-tit{  margin-left: 0.5rem !important;  margin-top: 0.06rem;  }
    .card-name{  font-size: 0.17rem;  }
    .mui-card-header.mui-card-media .mui-media-body p {  font-size: 0.12rem;  margin-top: 0.08rem;  }
    .mui-card{  margin: 0.1rem 0 0.05rem 0;     border-bottom: 1px solid #ddd; box-shadow: inherit; }
    .card-content{  margin: 0.05rem;  }
    .pinglcont{  font-size: 0.12rem;  }
    .pinglhead{  width: 0.4rem;  height: 0.4rem !important;  border-radius: 0.4rem;  border: 1px solid #ddd;  }
    .pinglname{  font-size: 0.13rem;  }
    .pingrt{  width: 80%;  margin: 0 auto;  }
    #content{  width: 2.5rem;  height: 0.3rem;  margin: 0.05rem;  }
    #put{  font-size: 0.12rem;  width: 0.55rem;  height: 0.3rem;  margin-top: 0.03rem;  }
    .like-list-box{  width: 100%;  }
    .like-list{  overflow: hidden;  }
    .like-list li{  float: left;  margin: 0.03rem;  }
    .mui-grid-view.mui-grid-9{  border-top:inherit !important;  border-left:inherit !important;  }

    .mtb{  margin: 0.05rem 0; padding: 0.03rem; }
    .aixinicon{  background: url("asset/image/aixinicon.png") no-repeat;  width: 0.1rem;  height: 0.1rem;  display: inline-block;  background-size: 0.1rem;  margin: 0 0.04rem;  }
    .lishiicon{  background: url("asset/image/lishiicon.png") no-repeat;  width: 0.1rem;  height: 0.1rem;  display: inline-block;  background-size: 0.1rem;  margin: 0 0.04rem;  }
    .didianicon{  background: url("asset/image/didianicon.png") no-repeat;  width: 0.1rem;  height: 0.1rem;  display: inline-block;  background-size: 0.1rem;  margin: 0 0.04rem;  }
    .qianicon{  background: url("asset/image/qianicon.png") no-repeat;  width: 0.1rem;  height: 0.1rem;  display: inline-block;  background-size: 0.1rem;  margin: 0 0.04rem;  }
    .mui-icon{  font-size: 0.1rem;  }
    .mui-pull-right{  margin-right: inherit;  }
    .mess-li{  margin: 0.09rem 0.04rem;  }
    .mui-inline{  line-height: 0.1rem;  }
    .xiadanshu{  font-size: 0.1rem;  margin: 0 0.1rem;  margin-top: 0.02rem;  color: #929292;  }
</style>
<body>
<!-- 顶部导航-->
<header id="header" class="mui-bar mui-bar-nav">
    <a class="mui-icon mui-icon-back mui-pull-left" href="javascript:history.back(-1)" style="padding: 0.03rem"></a>
    <h1 class="mui-title">订单详情</h1>
</header>
<div class="title" style="margin-top: 0.4rem"></div>
<div class="content" style="    margin-bottom: 0.4rem;">
    <div class="mui-card">
        <div class="mui-card-header mui-card-media card-head">
            <img class="card-img" src="http://www.tudangjia.cn/photo/avatar/20161110121412_850.jpg">
            <div class="mui-media-body card-tit">
                <i class="card-name oname">代跑腿</i>
                    <!-- 五角星-->
                <div class="mui-content-padded">
                    <div class="icons mui-inline">
                        <i data-index="1" class="mui-icon  mui-icon-star"></i>
                        <i data-index="2" class="mui-icon  mui-icon-star"></i>
                        <i data-index="3" class="mui-icon  mui-icon-star"></i>
                        <i data-index="4" class="mui-icon mui-icon-star"></i>
                        <i data-index="5" class="mui-icon mui-icon-star"></i>
                    </div>
                    <span class="xiadanshu">下单数</span>
                </div>
            </div>
        </div>
        <div class="mui-card-content">
            <h3 class="card-content">
                    <h4 class="mtb"><i class="lishiicon"></i><span class="jdtime">提交时间:2022/4/22 12:00</span></h4>
                <h4 class="mtb"><i class="lishiicon"></i><span class="jdtime">预期截止时间:2022/4/23 12:00</span></h4>
                <h4 class="mtb"><i class="didianicon"></i><span class="address">湖北宜昌西陵区</span></h4>
                    <h4 class="mtb"><i class="aixinicon"></i><span class="xuqiu">0.00</span></h4>
            </h3>
        </div>
        <div class="mui-card-footer">
            <ul class="mess-ul" style="background: #fff;width: 100%;">
                <li class="mess-li">
                    <h3><span>订单号:</span><i class="mui-pull-right ordernum" style="margin-right: 0.05rem;">60元</i></h3>
                </li>
                <li class="mess-li">
                    <h3><span>交易成功:</span><i class="mui-pull-right shijian" style="margin-right: 0.05rem;">60元</i></h3>
                </li>
                <li class="mess-li">
                    <h3><span>商品价格:</span><i class="mui-pull-right jiage" style="margin-right: 0.05rem;">60元</i></h3>
                </li>
            </ul>

        </div>
    </div>
    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed pinglunbox">
        <li class="mui-table-view-cell">
            <h3 style="margin: 0.04rem;"><span class="pinglunshu">合计</span><i class="mui-pull-right jiage">60元</i></h3>
        </li>
    </ul>
</div>
</body>
<script type="text/javascript" src="asset/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="asset/js/rem.js"></script>
<script src="asset/js/mui.min.js"></script>
<script src="asset/js/feedback.js" type="text/javascript" charset="utf-8"></script>
<script src="asset/js/common.js"></script>

</html>